Callout Circles
Callout Circles
Callout circles provide a way to highlight certain information on a page. They were developed for use on the new program page, but can be used anywhere that you need to draw users' attention to high level information.
View
120
Total Credit Hours
$1000
Cost per Credit Hour
40
Total Classes Lasting 8 Weeks
10
Semesters to Complete
HTML
<div class="obj-grid obj-grid--gap-lg">
<div class="obj-grid__6-12 obj-grid__3-12@md util-align-center">
<div class="circle-info">
<span class="circle-info__number">120</span>
<span class="circle-info__label">Total Credit Hours</span>
</div>
</div>
<div class="obj-grid__6-12 obj-grid__3-12@md util-align-center">
<div class="circle-info">
<span class="circle-info__number">$1000</span>
<span class="circle-info__label">Cost per Credit Hour</span>
</div>
</div>
<div class="obj-grid__6-12 obj-grid__3-12@md util-align-center">
<div class="circle-info">
<span class="circle-info__number">40</span>
<span class="circle-info__label">Total Classes Lasting 8 Weeks</span>
</div>
</div>
<div class="obj-grid__6-12 obj-grid__3-12@md util-align-center">
<div class="circle-info">
<span class="circle-info__number">10</span>
<span class="circle-info__label">Semesters to Complete</span>
</div>
</div>
</div>